<!DOCTYPE html>
<html>

<head>


    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>平台消耗对比</title>
    <#include "/header.html">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <script src="${request.contextPath}/statics/plugins/layui/layui.all.js"></script>
    <link rel="stylesheet" href="${request.contextPath}/statics/css/chartStyle.css">
    <script src="${request.contextPath}/statics/js/echarts.min.js"></script>
    <script src="${request.contextPath}/statics/js/transData.js"></script>
</head>
<style>
    .bootstrap-select{
        width: 100% !important;
    }
    .glyphicon-arrow-up{
        color: red;
    }

    .glyphicon-arrow-down{
        color: #76d471;
    }
    .exportBtn{
        padding: 6px 10px;
        background-color: #0C0C0C;
        color: #fff;
        font-size: 14px;
        border-radius: 2px;
        margin-left: 20px;
        cursor: pointer;
    }
</style>
<body>
<div id="index">
    <div class="layui-container" style="width: 100%;">
        <div class="layui-row" style="margin-top: 10px;">
            <div class="layui-col-md2 ">
                <select class="selectpicker" id="siteSelect" title="请选择平台名称"  style="width:100%;" >

                </select>
            </div>
            <div class="layui-col-md2" style="padding-left: 20px;">
                <input type="text" class="form-control" required  id="startTime"  placeholder="请输入对比日期"  autocomplete="off" >
            </div>
            <div class="layui-col-md1" style="width: 50px;text-align: center;line-height: 35px;cursor: pointer;">
                <span class="fa fa-exchange fa-2x" onclick="switchover()"></span>
            </div>
            <div class="layui-col-md2" >
                <input type="text" class="form-control" required  id="endTime"  placeholder="请输入对比日期"  autocomplete="off" >
            </div>
            <div class="layui-col-md3 " style="padding-left: 20px;">
                <div class="btn btn-default" id="search" onclick="reload()">对比</div>
                <div class="btn-group" role="group" id="horizon">
                    <div class="btn btn-default" id="search1" data-id="1">近一周</div>
                    <div class="btn btn-default" id="search2" data-id="2">近一月</div>
                </div>
            </div>
        </div>

        <div class="row chartsBox" style="padding-top: 20px;" id="line">
            <#if shiro.hasPermission("data:expend:earnings")>
            <div class="col-md-12 chartCon">
               <div class="chartStyle" id="chart"></div>
               <div class="chartText chart">
                   <b class="tipLogo green" data-toggle="tooltip" data-original-title="" data-placement="bottom" >前</b>
                   <span class="valColor green">暂无</span>
                   <b class="tipLogo blue" data-toggle="tooltip" data-original-title="" data-placement="bottom" >后</b>
                   <span class="valColor blue">暂无</span>
                   <b class="tipLogo wathet" data-toggle="tooltip" data-original-title="" data-placement="bottom" >比</b>
                   <span class="valColor  wathet">暂无</span>
                   <#if shiro.hasPermission("data:expend:earnings_export")>
                   <span class="exportBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
               </#if>
               </div>
           </div>
        </#if>
        <#if shiro.hasPermission("data:expend:ipExpend")>
            <div class="col-md-12 chartCon">
                <div class="chartStyle" id="chart1"></div>
                <div class="chartText chart1">
                    <b class="tipLogo green" data-toggle="tooltip" data-original-title="" data-placement="bottom" >前</b>
                    <span class="valColor green">暂无</span>
                    <b class="tipLogo blue" data-toggle="tooltip" data-original-title="" data-placement="bottom" >后</b>
                    <span class="valColor blue">暂无</span>
                    <b class="tipLogo wathet" data-toggle="tooltip" data-original-title="" data-placement="bottom" >比</b>
                    <span class="valColor  wathet">暂无</span>
                    <#if shiro.hasPermission("data:expend:ipExpend_export")>
                    <span class="exportBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
                </#if>
                </div>
            </div>
    </#if>

<#if shiro.hasPermission("expend:forwardIncome:showCharts")>
<div class="col-md-12 chartCon">
    <div class="chartStyle" id="chart2"></div>
    <div class="chartText chart2">
        <b class="tipLogo green" data-toggle="tooltip" data-original-title="" data-placement="bottom" >前</b>
        <span class="valColor green">暂无</span>
        <b class="tipLogo blue" data-toggle="tooltip" data-original-title="" data-placement="bottom" >后</b>
        <span class="valColor blue">暂无</span>
        <b class="tipLogo wathet" data-toggle="tooltip" data-original-title="" data-placement="bottom" >比</b>
        <span class="valColor  wathet">暂无</span>
        <#if shiro.hasPermission("expend:forwardIncome:chartExport")>
        <span class="exportBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
    </#if>
</div>
</div>
</#if>

<#if shiro.hasPermission("expend:h5Income:showCharts")>
<div class="col-md-12 chartCon">
    <div class="chartStyle" id="chart3"></div>
    <div class="chartText chart3">
        <b class="tipLogo green" data-toggle="tooltip" data-original-title="" data-placement="bottom" >前</b>
        <span class="valColor green">暂无</span>
        <b class="tipLogo blue" data-toggle="tooltip" data-original-title="" data-placement="bottom" >后</b>
        <span class="valColor blue">暂无</span>
        <b class="tipLogo wathet" data-toggle="tooltip" data-original-title="" data-placement="bottom" >比</b>
        <span class="valColor  wathet">暂无</span>
        <#if shiro.hasPermission("expend:h5Income:chartExport")>
        <span class="exportBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
    </#if>
</div>
</div>
</#if>


<#if shiro.hasPermission("expend:forwardIpUse:showCharts")>
<div class="col-md-12 chartCon">
    <div class="chartStyle" id="chart4"></div>
    <div class="chartText chart4">
        <b class="tipLogo green" data-toggle="tooltip" data-original-title="" data-placement="bottom" >前</b>
        <span class="valColor green">暂无</span>
        <b class="tipLogo blue" data-toggle="tooltip" data-original-title="" data-placement="bottom" >后</b>
        <span class="valColor blue">暂无</span>
        <b class="tipLogo wathet" data-toggle="tooltip" data-original-title="" data-placement="bottom" >比</b>
        <span class="valColor  wathet">暂无</span>
        <#if shiro.hasPermission("expend:forwardIpUse:chartExport")>
        <span class="exportBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
    </#if>
</div>
</div>
</#if>

<#if shiro.hasPermission("expend:h5IpUse:showCharts")>
<div class="col-md-12 chartCon">
    <div class="chartStyle" id="chart5"></div>
    <div class="chartText chart5">
        <b class="tipLogo green" data-toggle="tooltip" data-original-title="" data-placement="bottom" >前</b>
        <span class="valColor green">暂无</span>
        <b class="tipLogo blue" data-toggle="tooltip" data-original-title="" data-placement="bottom" >后</b>
        <span class="valColor blue">暂无</span>
        <b class="tipLogo wathet" data-toggle="tooltip" data-original-title="" data-placement="bottom" >比</b>
        <span class="valColor  wathet">暂无</span>
        <#if shiro.hasPermission("expend:h5IpUse:chartExport")>
        <span class="exportBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
    </#if>
</div>
</div>
</#if>
<#if shiro.hasPermission("expend:forwardOutIncome:showCharts")>
<div class="col-md-12 chartCon">
    <div class="chartStyle" id="chart12"></div>
    <div class="chartText chart12">
        <b class="tipLogo green" data-toggle="tooltip" data-original-title="" data-placement="bottom" >前</b>
        <span class="valColor green">暂无</span>
        <b class="tipLogo blue" data-toggle="tooltip" data-original-title="" data-placement="bottom" >后</b>
        <span class="valColor blue">暂无</span>
        <b class="tipLogo wathet" data-toggle="tooltip" data-original-title="" data-placement="bottom" >比</b>
        <span class="valColor  wathet">暂无</span>
        <#if shiro.hasPermission("expend:forwardOutIncome:exportExcel")>
        <span class="exportBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
    </#if>
</div>
</div>
</#if>
<#if shiro.hasPermission("expend:forwardInsideIncome:showCharts")>
<div class="col-md-12 chartCon">
    <div class="chartStyle" id="chart13"></div>
    <div class="chartText chart13">
        <b class="tipLogo green" data-toggle="tooltip" data-original-title="" data-placement="bottom" >前</b>
        <span class="valColor green">暂无</span>
        <b class="tipLogo blue" data-toggle="tooltip" data-original-title="" data-placement="bottom" >后</b>
        <span class="valColor blue">暂无</span>
        <b class="tipLogo wathet" data-toggle="tooltip" data-original-title="" data-placement="bottom" >比</b>
        <span class="valColor  wathet">暂无</span>
        <#if shiro.hasPermission("expend:forwardInsideIncome:exportExcel")>
        <span class="exportBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
    </#if>
</div>
</div>
</#if>
<#if shiro.hasPermission("expend:forwardOutIpUse:showCharts")>
<div class="col-md-12 chartCon">
    <div class="chartStyle" id="chart14"></div>
    <div class="chartText chart14">
        <b class="tipLogo green" data-toggle="tooltip" data-original-title="" data-placement="bottom" >前</b>
        <span class="valColor green">暂无</span>
        <b class="tipLogo blue" data-toggle="tooltip" data-original-title="" data-placement="bottom" >后</b>
        <span class="valColor blue">暂无</span>
        <b class="tipLogo wathet" data-toggle="tooltip" data-original-title="" data-placement="bottom" >比</b>
        <span class="valColor  wathet">暂无</span>
        <#if shiro.hasPermission("expend:forwardOutIpUse:exportExcel")>
        <span class="exportBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
    </#if>
</div>
</div>
</#if>
<#if shiro.hasPermission("expend:forwardInsideIpUse:showCharts")>
<div class="col-md-12 chartCon">
    <div class="chartStyle" id="chart15"></div>
    <div class="chartText chart15">
        <b class="tipLogo green" data-toggle="tooltip" data-original-title="" data-placement="bottom" >前</b>
        <span class="valColor green">暂无</span>
        <b class="tipLogo blue" data-toggle="tooltip" data-original-title="" data-placement="bottom" >后</b>
        <span class="valColor blue">暂无</span>
        <b class="tipLogo wathet" data-toggle="tooltip" data-original-title="" data-placement="bottom" >比</b>
        <span class="valColor  wathet">暂无</span>
        <#if shiro.hasPermission("expend:forwardInsideIpUse:exportExcel")>
        <span class="exportBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
    </#if>
</div>
</div>
</#if>
<#if shiro.hasPermission("expend:newTotalIncome:showCharts")>
<div class="col-md-12 chartCon">
    <div class="chartStyle" id="chart6"></div>
    <div class="chartText chart6">
        <b class="tipLogo green" data-toggle="tooltip" data-original-title="" data-placement="bottom" >前</b>
        <span class="valColor green">暂无</span>
        <b class="tipLogo blue" data-toggle="tooltip" data-original-title="" data-placement="bottom" >后</b>
        <span class="valColor blue">暂无</span>
        <b class="tipLogo wathet" data-toggle="tooltip" data-original-title="" data-placement="bottom" >比</b>
        <span class="valColor  wathet">暂无</span>
        <#if shiro.hasPermission("expend:newTotalIncome:exportExcel")>
        <span class="exportBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
    </#if>
</div>
</div>
</#if>

<#if shiro.hasPermission("expend:newForwardIncome:showCharts")>
<div class="col-md-12 chartCon">
    <div class="chartStyle" id="chart7"></div>
    <div class="chartText chart7">
        <b class="tipLogo green" data-toggle="tooltip" data-original-title="" data-placement="bottom" >前</b>
        <span class="valColor green">暂无</span>
        <b class="tipLogo blue" data-toggle="tooltip" data-original-title="" data-placement="bottom" >后</b>
        <span class="valColor blue">暂无</span>
        <b class="tipLogo wathet" data-toggle="tooltip" data-original-title="" data-placement="bottom" >比</b>
        <span class="valColor  wathet">暂无</span>
        <#if shiro.hasPermission("expend:newForwardIncome:exportExcel")>
        <span class="exportBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
    </#if>
</div>
</div>
</#if>

<#if shiro.hasPermission("expend:newH5Income:showCharts")>
<div class="col-md-12 chartCon">
    <div class="chartStyle" id="chart8"></div>
    <div class="chartText chart8">
        <b class="tipLogo green" data-toggle="tooltip" data-original-title="" data-placement="bottom" >前</b>
        <span class="valColor green">暂无</span>
        <b class="tipLogo blue" data-toggle="tooltip" data-original-title="" data-placement="bottom" >后</b>
        <span class="valColor blue">暂无</span>
        <b class="tipLogo wathet" data-toggle="tooltip" data-original-title="" data-placement="bottom" >比</b>
        <span class="valColor  wathet">暂无</span>
        <#if shiro.hasPermission("expend:newH5Income:exportExcel")>
        <span class="exportBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
    </#if>
</div>
</div>
</#if>

<#if shiro.hasPermission("expend:newIpUse:showCharts")>
<div class="col-md-12 chartCon">
    <div class="chartStyle" id="chart9"></div>
    <div class="chartText chart9">
        <b class="tipLogo green" data-toggle="tooltip" data-original-title="" data-placement="bottom" >前</b>
        <span class="valColor green">暂无</span>
        <b class="tipLogo blue" data-toggle="tooltip" data-original-title="" data-placement="bottom" >后</b>
        <span class="valColor blue">暂无</span>
        <b class="tipLogo wathet" data-toggle="tooltip" data-original-title="" data-placement="bottom" >比</b>
        <span class="valColor  wathet">暂无</span>
        <#if shiro.hasPermission("expend:newIpUse:exportExcel")>
        <span class="exportBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
    </#if>
</div>
</div>
</#if>

<#if shiro.hasPermission("expend:newForwardIpUse:showCharts")>
<div class="col-md-12 chartCon">
    <div class="chartStyle" id="chart10"></div>
    <div class="chartText chart10">
        <b class="tipLogo green" data-toggle="tooltip" data-original-title="" data-placement="bottom" >前</b>
        <span class="valColor green">暂无</span>
        <b class="tipLogo blue" data-toggle="tooltip" data-original-title="" data-placement="bottom" >后</b>
        <span class="valColor blue">暂无</span>
        <b class="tipLogo wathet" data-toggle="tooltip" data-original-title="" data-placement="bottom" >比</b>
        <span class="valColor  wathet">暂无</span>
        <#if shiro.hasPermission("expend:newForwardIpUse:exportExcel")>
        <span class="exportBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
    </#if>
</div>
</div>
</#if>
<#if shiro.hasPermission("expend:newH5IpUse:showCharts")>
<div class="col-md-12 chartCon">
    <div class="chartStyle" id="chart11"></div>
    <div class="chartText chart11">
        <b class="tipLogo green" data-toggle="tooltip" data-original-title="" data-placement="bottom" >前</b>
        <span class="valColor green">暂无</span>
        <b class="tipLogo blue" data-toggle="tooltip" data-original-title="" data-placement="bottom" >后</b>
        <span class="valColor blue">暂无</span>
        <b class="tipLogo wathet" data-toggle="tooltip" data-original-title="" data-placement="bottom" >比</b>
        <span class="valColor  wathet">暂无</span>
        <#if shiro.hasPermission("expend:newH5IpUse:exportExcel")>
        <span class="exportBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
    </#if>
</div>
</div>
</#if>
<#if shiro.hasPermission("expend:newForwardOutIncome:showCharts")>
<div class="col-md-12 chartCon">
    <div class="chartStyle" id="chart16"></div>
    <div class="chartText chart16">
        <b class="tipLogo green" data-toggle="tooltip" data-original-title="" data-placement="bottom" >前</b>
        <span class="valColor green">暂无</span>
        <b class="tipLogo blue" data-toggle="tooltip" data-original-title="" data-placement="bottom" >后</b>
        <span class="valColor blue">暂无</span>
        <b class="tipLogo wathet" data-toggle="tooltip" data-original-title="" data-placement="bottom" >比</b>
        <span class="valColor  wathet">暂无</span>
        <#if shiro.hasPermission("expend:newForwardOutIncome:exportExcel")>
        <span class="exportBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
    </#if>
</div>
</div>
</#if>
<#if shiro.hasPermission("expend:newForwardInsideIncome:showCharts")>
<div class="col-md-12 chartCon">
    <div class="chartStyle" id="chart17"></div>
    <div class="chartText chart17">
        <b class="tipLogo green" data-toggle="tooltip" data-original-title="" data-placement="bottom" >前</b>
        <span class="valColor green">暂无</span>
        <b class="tipLogo blue" data-toggle="tooltip" data-original-title="" data-placement="bottom" >后</b>
        <span class="valColor blue">暂无</span>
        <b class="tipLogo wathet" data-toggle="tooltip" data-original-title="" data-placement="bottom" >比</b>
        <span class="valColor  wathet">暂无</span>
        <#if shiro.hasPermission("expend:newForwardInsideIncome:exportExcel")>
        <span class="exportBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
    </#if>
</div>
</div>
</#if>
<#if shiro.hasPermission("expend:newForwardOutIpUse:showCharts")>
<div class="col-md-12 chartCon">
    <div class="chartStyle" id="chart18"></div>
    <div class="chartText chart18">
        <b class="tipLogo green" data-toggle="tooltip" data-original-title="" data-placement="bottom" >前</b>
        <span class="valColor green">暂无</span>
        <b class="tipLogo blue" data-toggle="tooltip" data-original-title="" data-placement="bottom" >后</b>
        <span class="valColor blue">暂无</span>
        <b class="tipLogo wathet" data-toggle="tooltip" data-original-title="" data-placement="bottom" >比</b>
        <span class="valColor  wathet">暂无</span>
        <#if shiro.hasPermission("expend:newForwardOutIpUse:exportExcel")>
        <span class="exportBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
    </#if>
</div>
</div>
</#if>
<#if shiro.hasPermission("expend:newForwardInsideIpUse:showCharts")>
<div class="col-md-12 chartCon">
    <div class="chartStyle" id="chart19"></div>
    <div class="chartText chart19">
        <b class="tipLogo green" data-toggle="tooltip" data-original-title="" data-placement="bottom" >前</b>
        <span class="valColor green">暂无</span>
        <b class="tipLogo blue" data-toggle="tooltip" data-original-title="" data-placement="bottom" >后</b>
        <span class="valColor blue">暂无</span>
        <b class="tipLogo wathet" data-toggle="tooltip" data-original-title="" data-placement="bottom" >比</b>
        <span class="valColor  wathet">暂无</span>
        <#if shiro.hasPermission("expend:newForwardInsideIpUse:exportExcel")>
        <span class="exportBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
    </#if>
</div>
</div>
</#if>



      </div>
</div>
<script>


    function switchover(){
        var time = $('#startTime').val();
        $('#startTime').val($('#endTime').val())
        $('#endTime').val(time)
    }

    function toThousands(num) {
        var result = [ ], counter = 0;
        num = (num || 0).toString().split('');
        for (var i = num.length - 1; i >= 0; i--) {
            counter++;
            result.unshift(num[i]);
            if (!(counter % 3) && i != 0) { result.unshift(','); }
        }
        return result.join('');
    }


    var laydate = layui.laydate;
    laydate.render({
        elem: '#startTime',
        range: true,
        position: 'fixed',
        change:function(value, date, endDate){
            $('#horizon .btn').removeClass('active');
        }
    });
    laydate.render({
        elem: '#endTime',
        range: true,
        position: 'fixed',
        change:function(value, date, endDate){
            $('#horizon .btn').removeClass('active');
        }
    });
    $(function(){
        $('#horizon .btn').each(function(index){
            $(this).click(function(){
                if($(this).attr('data-id')==1){
                    $('#startTime').val(gettime(6) +' - '+gettime(0))
                    $('#endTime').val(gettime(13) +' - '+gettime(7))
                }else{
                    $('#startTime').val(gettime(29) +' - '+gettime(0))
                    $('#endTime').val(gettime(59) +' - '+gettime(30))
                }
                $('#horizon .btn').removeClass('active');
                $(this).addClass('active');
                reload()
            })
        })
        commonOption2('chart',1,1,1,'平台收益');
        commonOption2('chart1',1,1,1,'平台IP消耗');
        commonOption2('chart2',1,1,1,'转发区收益');
        commonOption2('chart3',1,1,1,'h5收益');
        commonOption2('chart4',1,1,1,'转发区IP消耗');
        commonOption2('chart5',1,1,1,'h5IP消耗');
        commonOption2('chart6',1,1,1,'新广告系统收益');
        commonOption2('chart7',1,1,1,'新广告系统转发区收益');
        commonOption2('chart8',1,1,1,'新广告系统h5收益');
        commonOption2('chart9',1,1,1,'新广告系统ip消耗');
        commonOption2('chart10',1,1,1,'新广告系统转发区ip消耗');
        commonOption2('chart11',1,1,1,'新广告系统h5ip消耗');
        commonOption2('chart12',1,1,1,'转发区外部收益');
        commonOption2('chart13',1,1,1,'转发区内部收益');
        commonOption2('chart14',1,1,1,'转发区外部ip消耗');
        commonOption2('chart15',1,1,1,'转发区内部ip消耗');
        commonOption2('chart16',1,1,1,'新转发区外部收益');
        commonOption2('chart17',1,1,1,'新转发区内部收益');
        commonOption2('chart18',1,1,1,'新转发区外部ip消耗');
        commonOption2('chart19',1,1,1,'新转发区内部ip消耗');

    })
    function gettime(num){
        var _thisdate =new Date() - (1000*60 *60 *24*num)
        var date = new Date(_thisdate);
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    }

    $.ajax({
        type : "get",
        url : baseURL+"platform/findAllPlatform",
        dataType : "json",
        success: function(data) {
            if(data.code==0){
                var _html = '<option value="">全部平台</option>'
                for(var i=0;i<data.platformList.length;i++){
                    _html = _html + '<option value="'+data.platformList[i].platformId+'">'+data.platformList[i].nickName+'</option>'
                }
                $('#siteSelect').append(_html);
                $('#siteSelect').selectpicker('refresh');

            }else{
                layer.msg('数据获取失败');
            }
        },
        error:function(){
            statsData = false;
            layer.msg('数据获取失败');
        }
    });

    function reload() {
        if(($('#startTime').val()==''&&$('#endTime').val()=='')){
            layer.msg('时间格式不对')
            return;
        }
        $("#search").attr("disabled",'disabled');
        var obj_data = {
            "beforeStartDate":$('#startTime').val().split(' - ')[0]?$('#startTime').val().split(' - ')[0]:'',
            "beforeEndDate":$('#startTime').val().split(' - ')[1]?$('#startTime').val().split(' - ')[1]:'',
            "afterStartDate":$('#endTime').val().split(' - ')[0]?$('#endTime').val().split(' - ')[0]:'',
            "afterEndDate":$('#endTime').val().split(' - ')[1]?$('#endTime').val().split(' - ')[1]:'',
            "platformId":$('#siteSelect').val()?$('#siteSelect').val():null
             }
        indexloading = layer.load(2);
        getline(obj_data)

    }
    var indexloading;

    function getline(e){

        //平台收益
        ajaxc({
            permit:'data:expend:earnings',
            type: "post",
            url: baseURL + "articleStatis/getForwardArticleExpendBrokenLineChart",
            data:JSON.stringify(e),
            contentType:"application/json",
            success: function (data) {
                if(data.code==0){
                    layer.close(indexloading)
                    $("#search").attr("disabled",false);


                    $('[data-toggle="tooltip"]').tooltip({
                        html:true
                    });
                    commonOption('chart',data.result.brokenLine[0],data.result.xaxis,data.result.dateItem,'平台收益');
                }
            }
        });
        //平台IP消耗
        ajaxc({
            permit:'data:expend:ipExpend',
            type: "post",
            url: baseURL + "articleStatis/getCustomerIpStatisBrokenLineChart",
            data:JSON.stringify(e),
            contentType:"application/json",
            success: function (data) {
                if(data.code==0){
                    layer.close(indexloading)
                    $("#search").attr("disabled",false);

                    $('[data-toggle="tooltip"]').tooltip({
                        html:true
                    });
                    commonOption('chart1',data.result.brokenLine[0],data.result.xaxis,data.result.dateItem,'平台IP消耗');
                }
            }
        });

        //转发区收益
        ajaxc({
            permit:'expend:forwardIncome:showCharts',
            type: "post",
            url: baseURL + "articleStatisNew/getForwardAreaArticleExpendBrokenLineChart",
            data:JSON.stringify(e),
            contentType:"application/json",
            success: function (data) {
                if(data.code==0){
                    layer.close(indexloading)
                    $("#search").attr("disabled",false);

                    $('[data-toggle="tooltip"]').tooltip({
                        html:true
                    });
                    commonOption('chart2',data.result.brokenLine[0],data.result.xaxis,data.result.dateItem,'转发区收益');
                }
            }
        });

        //h5收益
        ajaxc({
            permit:'expend:h5Income:showCharts',
            type: "post",
            url: baseURL + "articleStatisNew/getH5ArticleExpendBrokenLineChart",
            data:JSON.stringify(e),
            contentType:"application/json",
            success: function (data) {
                if(data.code==0){
                    layer.close(indexloading)
                    $("#search").attr("disabled",false);

                    $('[data-toggle="tooltip"]').tooltip({
                        html:true
                    });
                    commonOption('chart3',data.result.brokenLine[0],data.result.xaxis,data.result.dateItem,'h5收益');
                }
            }
        });

        //转发区ip消耗
        ajaxc({
            permit:'expend:forwardIpUse:showCharts',
            type: "post",
            url: baseURL + "articleStatisNew/getForwardAreaCustomerIpStatisBrokenLineChart",
            data:JSON.stringify(e),
            contentType:"application/json",
            success: function (data) {
                if(data.code==0){
                    layer.close(indexloading)
                    $("#search").attr("disabled",false);

                    $('[data-toggle="tooltip"]').tooltip({
                        html:true
                    });
                    commonOption('chart4',data.result.brokenLine[0],data.result.xaxis,data.result.dateItem,'转发区ip消耗');
                }
            }
        });

        //h5ip消耗
        ajaxc({
            permit:'expend:h5IpUse:showCharts',
            type: "post",
            url: baseURL + "articleStatisNew/getH5CustomerIpStatisBrokenLineChart",
            data:JSON.stringify(e),
            contentType:"application/json",
            success: function (data) {
                if(data.code==0){
                    layer.close(indexloading)
                    $("#search").attr("disabled",false);

                    $('[data-toggle="tooltip"]').tooltip({
                        html:true
                    });
                    commonOption('chart5',data.result.brokenLine[0],data.result.xaxis,data.result.dateItem,'h5ip消耗');
                }
            }
        });
        //新广告系统收益
        ajaxc({
            permit:'expend:newTotalIncome:showCharts',
            type: "post",
            url: baseURL + "articleStatisNew/getNewSystemExpendPriceBrokenLineChart",
            data:JSON.stringify(e),
            contentType:"application/json",
            success: function (data) {
                if(data.code==0){
                    layer.close(indexloading)
                    $("#search").attr("disabled",false);

                    $('[data-toggle="tooltip"]').tooltip({
                        html:true
                    });
                    commonOption('chart6',data.result.brokenLine[0],data.result.xaxis,data.result.dateItem,'新广告系统收益');
                }
            }
        });
        //新广告系统转发区收益
        ajaxc({
            permit:'expend:newForwardIncome:showCharts',
            type: "post",
            url: baseURL + "articleStatisNew/getNewSystemForwardAreaExpendPriceBrokenLineChart",
            data:JSON.stringify(e),
            contentType:"application/json",
            success: function (data) {
                if(data.code==0){
                    layer.close(indexloading)
                    $("#search").attr("disabled",false);

                    $('[data-toggle="tooltip"]').tooltip({
                        html:true
                    });
                    commonOption('chart7',data.result.brokenLine[0],data.result.xaxis,data.result.dateItem,'新广告系统转发区收益');
                }
            }
        });
        //新广告系统h5收益
        ajaxc({
            permit:'expend:newH5Income:showCharts',
            type: "post",
            url: baseURL + "articleStatisNew/getNewSystemH5ExpendPriceBrokenLineChart",
            data:JSON.stringify(e),
            contentType:"application/json",
            success: function (data) {
                if(data.code==0){
                    layer.close(indexloading)
                    $("#search").attr("disabled",false);

                    $('[data-toggle="tooltip"]').tooltip({
                        html:true
                    });
                    commonOption('chart8',data.result.brokenLine[0],data.result.xaxis,data.result.dateItem,'新广告系统h5收益');
                }
            }
        });
        //新广告系统ip消耗
        ajaxc({
            permit:'expend:newIpUse:showCharts',
            type: "post",
            url: baseURL + "articleStatisNew/getNewSystemIpBrokenLineChart",
            data:JSON.stringify(e),
            contentType:"application/json",
            success: function (data) {
                if(data.code==0){
                    layer.close(indexloading)
                    $("#search").attr("disabled",false);

                    $('[data-toggle="tooltip"]').tooltip({
                        html:true
                    });
                    commonOption('chart9',data.result.brokenLine[0],data.result.xaxis,data.result.dateItem,'新广告系统ip消耗');
                }
            }
        });
        //新广告系统转发区ip消耗
        ajaxc({
            permit:'expend:newForwardIpUse:showCharts',
            type: "post",
            url: baseURL + "articleStatisNew/getNewSystemForwardAreaIpBrokenLineChart",
            data:JSON.stringify(e),
            contentType:"application/json",
            success: function (data) {
                if(data.code==0){
                    layer.close(indexloading)
                    $("#search").attr("disabled",false);

                    $('[data-toggle="tooltip"]').tooltip({
                        html:true
                    });
                    commonOption('chart10',data.result.brokenLine[0],data.result.xaxis,data.result.dateItem,'新广告系统转发区ip消耗');
                }
            }
        });
        //新广告系统h5ip消耗
        ajaxc({
            permit:'expend:newH5IpUse:showCharts',
            type: "post",
            url: baseURL + "articleStatisNew/getNewSystemH5IpBrokenLineChart",
            data:JSON.stringify(e),
            contentType:"application/json",
            success: function (data) {
                if(data.code==0){
                    layer.close(indexloading)
                    $("#search").attr("disabled",false);

                    $('[data-toggle="tooltip"]').tooltip({
                        html:true
                    });
                    commonOption('chart11',data.result.brokenLine[0],data.result.xaxis,data.result.dateItem,'新广告系统h5ip消耗');
                }
            }
        });
        //转发区外部收益
        ajaxc({
            permit:'expend:forwardOutIncome:showCharts',
            type: "post",
            url: baseURL + "articleStatisNew/getForwardAreaOutArticleExpendBrokenLineChart",
            data:JSON.stringify(e),
            contentType:"application/json",
            success: function (data) {
                if(data.code==0){
                    layer.close(indexloading)
                    $("#search").attr("disabled",false);

                    $('[data-toggle="tooltip"]').tooltip({
                        html:true
                    });
                    commonOption('chart12',data.result.brokenLine[0],data.result.xaxis,data.result.dateItem,'转发区外部收益');
                }
            }
        });
        //转发区内部收益
        ajaxc({
            permit:'expend:forwardInsideIncome:showCharts',
            type: "post",
            url: baseURL + "articleStatisNew/getForwardAreaInArticleExpendBrokenLineChart",
            data:JSON.stringify(e),
            contentType:"application/json",
            success: function (data) {
                if(data.code==0){
                    layer.close(indexloading)
                    $("#search").attr("disabled",false);

                    $('[data-toggle="tooltip"]').tooltip({
                        html:true
                    });
                    commonOption('chart13',data.result.brokenLine[0],data.result.xaxis,data.result.dateItem,'转发区内部收益');
                }
            }
        });
        //转发区外部ip消耗
        ajaxc({
            permit:'expend:forwardOutIpUse:showCharts',
            type: "post",
            url: baseURL + "articleStatisNew/getForwardAreaOutCustomerIpStatisBrokenLineChart",
            data:JSON.stringify(e),
            contentType:"application/json",
            success: function (data) {
                if(data.code==0){
                    layer.close(indexloading)
                    $("#search").attr("disabled",false);

                    $('[data-toggle="tooltip"]').tooltip({
                        html:true
                    });
                    commonOption('chart14',data.result.brokenLine[0],data.result.xaxis,data.result.dateItem,'转发区外部ip消耗');
                }
            }
        });
        //转发区内部ip消耗
        ajaxc({
            permit:'expend:forwardInsideIpUse:showCharts',
            type: "post",
            url: baseURL + "articleStatisNew/getForwardAreaInCustomerIpStatisBrokenLineChart",
            data:JSON.stringify(e),
            contentType:"application/json",
            success: function (data) {
                if(data.code==0){
                    layer.close(indexloading)
                    $("#search").attr("disabled",false);

                    $('[data-toggle="tooltip"]').tooltip({
                        html:true
                    });
                    commonOption('chart15',data.result.brokenLine[0],data.result.xaxis,data.result.dateItem,'转发区内部ip消耗');
                }
            }
        });
        //新转发区外部收益
        ajaxc({
            permit:'expend:newForwardOutIncome:showCharts',
            type: "post",
            url: baseURL + "articleStatisNew/getNewSystemForwardAreaOutExpendPriceBrokenLineChart",
            data:JSON.stringify(e),
            contentType:"application/json",
            success: function (data) {
                if(data.code==0){
                   $("#search").attr("disabled",false);

                    $('[data-toggle="tooltip"]').tooltip({
                        html:true
                    });
                    commonOption('chart16',data.result.brokenLine[0],data.result.xaxis,data.result.dateItem,'新转发区外部收益');
                }
            }
        });
        //新转发区内部收益
        ajaxc({
            permit:'expend:newForwardInsideIncome:showCharts',
            type: "post",
            url: baseURL + "articleStatisNew/getNewSystemForwardAreaInExpendPriceBrokenLineChart",
            data:JSON.stringify(e),
            contentType:"application/json",
            success: function (data) {
                if(data.code==0){
                    $("#search").attr("disabled",false);

                    $('[data-toggle="tooltip"]').tooltip({
                        html:true
                    });
                    commonOption('chart17',data.result.brokenLine[0],data.result.xaxis,data.result.dateItem,'新转发区内部收益');
                }
            }
        });
        //新转发区外部ip消耗
        ajaxc({
            permit:'expend:newForwardOutIpUse:showCharts',
            type: "post",
            url: baseURL + "articleStatisNew/getNewSystemForwardAreaOutIpBrokenLineChart",
            data:JSON.stringify(e),
            contentType:"application/json",
            success: function (data) {
                if(data.code==0){
                    $("#search").attr("disabled",false);

                    $('[data-toggle="tooltip"]').tooltip({
                        html:true
                    });
                    commonOption('chart18',data.result.brokenLine[0],data.result.xaxis,data.result.dateItem,'新转发区外部ip消耗');
                }
            }
        });
        //新转发区内部ip消耗
        ajaxc({
            permit:'expend:newForwardInsideIpUse:showCharts',
            type: "post",
            url: baseURL + "articleStatisNew/getNewSystemForwardAreaInIpBrokenLineChart",
            data:JSON.stringify(e),
            contentType:"application/json",
            success: function (data) {
                if(data.code==0){
                    $("#search").attr("disabled",false);

                    $('[data-toggle="tooltip"]').tooltip({
                        html:true
                    });
                    commonOption('chart19',data.result.brokenLine[0],data.result.xaxis,data.result.dateItem,'新转发区内部ip消耗');
                }
            }
        });

    }

    function commonOption(id,seriesData,xaxis,dateItem,title){
        $('.'+id+' .green').eq(0).attr('data-original-title','对比前总数'+seriesData.todayNum);
        $('.'+id+' .green').eq(1).text(transData(seriesData.todayNum));
        $('.'+id+' .blue').eq(0).attr('data-original-title','对比后总数'+seriesData.yesterdayNum);
        $('.'+id+' .blue').eq(1).text(transData(seriesData.yesterdayNum));
        $('.'+id+' .wathet').eq(0).attr('data-original-title','比例'+seriesData.propor+'%')
        $('.'+id+' .wathet').eq(1).text(seriesData.propor+'%')
        var xaxiss = [];
        var xlene = 1
        if(seriesData.todayCount.length>=seriesData.yesterdayCount.length){
            xlene=2;
        }
        for(var i=0;i<xaxis.length;i++){
            if(xlene==2){
                xaxiss.push(xaxis[i]+(dateItem[i]?' VS '+dateItem[i]:''))
            }else{
                if(dateItem[i]){
                    xaxiss.push((dateItem[i]+' VS '+xaxis[i]))
                }else{
                    xaxiss.push(xaxis[i])
                }
            }
        }
        var myChart = echarts.init(document.getElementById(id));
        var option = {
            title: {
                text: title
            },
            tooltip: {
                trigger: 'axis',
                formatter:function (params) {
                    var data;
                    // console.log(params,dateItem,'sssss')
                    // var html = '<span style="color: #FFFFFF">'+params[0].axisValueLabel+'</span><br />';
                    var html =""
                    var perHtml = '';
                    if(params.length > 1){
                        data = calPercent(params[1].value,params[0].value);
                        if(data.perType == 1){
                            perHtml = '<i class="fa fa-long-arrow-up" style="color: red;margin-right: 3px"></i><span style="color: red;">'+data.percent+'</span>';
                        }else if(data.perType == 2){
                            perHtml = '<i class="fa fa-long-arrow-down" style="color: #2ec770;margin-right: 3px"></i><span style="color: #2ec770;">'+data.percent+'</span>';
                        }
                        html = html + '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + params[0].color + '"></span>' + (xlene==1?dateItem[params[0].dataIndex]:xaxis[params[0].dataIndex]) + '：' + addSplit(params[0].value) + '<br/>';
                        html = html + '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + params[1].color + '"></span>' + (xlene==1?xaxis[params[1].dataIndex]:dateItem[params[1].dataIndex]) + '：' + addSplit(params[1].value) + '&nbsp;&nbsp;&nbsp;'+ perHtml;
                    }else{
                        html = html + '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + params[0].color + '"></span>' + xaxis[params[0].dataIndex] + '：' + addSplit(params[0].value) + '<br/>';
                    }
                    return html;
                },
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985',
                        formatter:function (params) {
                            return parseFloat(params.value).toFixed(0)
                        }
                    }
                }
            },
            color:['#2ec770','#1c97f5'],
            legend: {
                data:['前','后'],
                left: '50%'
            },
            grid: {
                left: '40px',
                right: '4%',
                top:'90px',
                bottom:'3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                name:'时间',
                nameLocation:'start',
                axisLabel: {
                    showMaxLabel: true
                },
                axisPointer:{
                    label:{
                        formatter:function (params) {
                            // console.log(params,'ss');
                            var val  = params.value;
                            return params.value;
                        }
                    }
                },
                data:xaxiss
            },
            yAxis: {
                type: 'value',
                name:'数量'
            },
            series: [
                {
                    name:'前',
                    type:'line',
                    lineStyle:{
                        color:'#2ec770'
                    },
                    smooth: true,
                    data:seriesData.yesterdayCount
                },
                {
                    name:'后',
                    type:'line',
                    areaStyle: {},
                    lineStyle:{
                        color:'#1c97f5'
                    },
                    smooth: true,
                    data:seriesData.todayCount
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option,true);

    }
    function commonOption2(id,seriesData,xaxis,dateItem,title){

        var seriesData = {
            lineName: null,
            propor: 0,
            riseOrFall: 1,
            todayCount: ["0", "0", "0", "0", "0", "0", "0"],
            todayNum: "0",
            yesterdayCount: ["0", "0", "0", "0", "0", "0", "0"],
            yesterdayNum: "0"
        }
        var xaxis = ["", "", "", "", "", "", ""]
        var dateItem = ["", "", "", "", "", "", ""]
        $('.'+id+' .green').eq(0).attr('data-original-title','对比前总数'+seriesData.todayNum);
        $('.'+id+' .green').eq(1).text(transData(seriesData.todayNum));
        $('.'+id+' .blue').eq(0).attr('data-original-title','对比后总数'+seriesData.yesterdayNum);
        $('.'+id+' .blue').eq(1).text(transData(seriesData.yesterdayNum));
        $('.'+id+' .wathet').eq(0).attr('data-original-title','比例'+(seriesData.riseOrFall==1?'+':'-')+seriesData.propor+'%')
        $('.'+id+' .wathet').eq(1).text((seriesData.riseOrFall==1?'+':'-')+seriesData.propor+'%')
        var xaxiss = ["", "", "", "", "", "", ""];

        var myChart = echarts.init(document.getElementById(id));
        var option = {
            title: {
                text: title
            },
            tooltip: {
                trigger: 'axis',
                formatter:function (params) {
                    var data;
                    // console.log(params,dateItem,'sssss')
                    // var html = '<span style="color: #FFFFFF">'+params[0].axisValueLabel+'</span><br />';
                    var html =""
                    var perHtml = '';
                    if(params.length > 1){
                        data = calPercent(params[1].value,params[0].value);
                        if(data.perType == 1){
                            perHtml = '<i class="fa fa-long-arrow-up" style="color: red;margin-right: 3px"></i><span style="color: red;">'+data.percent+'</span>';
                        }else if(data.perType == 2){
                            perHtml = '<i class="fa fa-long-arrow-down" style="color: #2ec770;margin-right: 3px"></i><span style="color: #2ec770;">'+data.percent+'</span>';
                        }
                        html = html + '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + params[0].color + '"></span>' + (xlene==1?dateItem[params[0].dataIndex]:xaxis[params[0].dataIndex]) + '：' + addSplit(params[0].value) + '<br/>';
                        html = html + '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + params[1].color + '"></span>' + (xlene==1?xaxis[params[1].dataIndex]:dateItem[params[1].dataIndex]) + '：' + addSplit(params[1].value) + '&nbsp;&nbsp;&nbsp;'+ perHtml;
                    }else{
                        html = html + '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + params[0].color + '"></span>' + xaxis[params[0].dataIndex] + '：' + addSplit(params[0].value) + '<br/>';
                    }
                    return html;
                },
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985',
                        formatter:function (params) {
                            return parseFloat(params.value).toFixed(0)
                        }
                    }
                }
            },
            color:['#2ec770','#1c97f5'],
            legend: {
                data:['前','后'],
                left: '50%'
            },
            grid: {
                left: '40px',
                right: '4%',
                top:'90px',
                bottom:'3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                name:'时间',
                nameLocation:'start',
                axisLabel: {
                    showMaxLabel: true
                },
                axisPointer:{
                    label:{
                        formatter:function (params) {
                            // console.log(params,'ss');
                            var val  = params.value;
                            return params.value;
                        }
                    }
                },
                data:xaxiss
            },
            yAxis: {
                type: 'value',
                name:'数量'
            },
            series: [
                {
                    name:'前',
                    type:'line',
                    lineStyle:{
                        color:'#2ec770'
                    },
                    smooth: true,
                    data:[]
                },
                {
                    name:'后',
                    type:'line',
                    areaStyle: {},
                    lineStyle:{
                        color:'#1c97f5'
                    },
                    smooth: true,
                    data:[]
                }
            ]
        };
        myChart.setOption(option,true);

    }
</script>
<style>
    .chartText b.green{
        background-color:#2ec770;
    }
    .chartText span.green{
        color:#2ec770;
    }
    .chartText b.blue{
        background-color:#1c97f5;
    }
    .chartText span.blue{
        color:#1c97f5;
    }
    .chartText b.red{
        background-color: red;
    }
    .chartText span.red{
        color: red;
    }
    .chartText b.wathet{
        background-color: #62a6f5;
    }
    .chartText span.wathet{
        color: #62a6f5;
    }
</style>
</body>

</html>